<template>
  <var-bottom-navigation
    v-model:active="active"
    :fixed="props.fixed"
    :border="props.border"
    :safe-area="props.safeArea"
    :z-index="props.zIndex"
    :active-color="props.activeColor"
    :inactive-color="props.inactiveColor"
    :fab-props="props.fabProps"
  >
    <template v-for="item in tabbarList" :key="item.name">
      <var-bottom-navigation-item :name="item.name" :label="item.label" :icon="item.icon" @click="switchTabBar(item)" />
    </template>
  </var-bottom-navigation>
</template>

<script setup lang="ts">
import type { ButtonProps, BadgeProps } from '@varlet/ui'
interface TabBarItem {
  name: string
  label: string
  icon: string
  namespace?: string
  badge?: BadgeProps | boolean
  path: string
}

interface IProps {
  tabbarList?: TabBarItem[]
  fixed?: boolean
  border?: boolean
  safeArea?: boolean
  zIndex?: number
  activeColor?: string
  inactiveColor?: string
  fabProps?: ButtonProps
}

const props = withDefaults(defineProps<IProps>(), {
  fixed: true,
  border: true,
  safeArea: true,
  zIndex: 1,
  activeColor: undefined,
  inactiveColor: undefined,
  fabProps() {
    return { type: 'primary' }
  },
  tabbarList() {
    return [
      { name: 'home', label: '首页', icon: 'home', path: '/home' },
      { name: 'category', label: '分类', icon: 'bell', path: '/category' },
      { name: 'heart', label: '收藏', icon: 'heart', path: '/heart' },
      { name: 'cart', label: '购物车', icon: 'cart', path: '/cart' },
      { name: 'profile', label: '我的', icon: 'account-circle', path: '/profile' }
    ]
  }
})
const router = useRouter()
const active = ref(tempStorage.getItemStr('active') ?? 'home')
const switchTabBar = (item: TabBarItem) => {
  tempStorage.setItem('active', item.name)
  router.push(item.path)
}
</script>

<style scoped lang="less"></style>
